<template>
  <detail-card ref="box">
    <template slot="main">
      <!-- 详情区域 -->
      <job-detail-card :id="$route.params.id" ref="base"/>
      <job-log-card ref="log" :job-id="$route.params.id"/>
    </template>
    <template slot="nav">
      <div :class="['nav-item', navIndex === 1 ? 'is-active' : '']" @click="handleNav(1)">
        <span>基本信息</span>
      </div>
      <div :class="['nav-item', navIndex === 2 ? 'is-active' : '']" @click="handleNav(2)">
        <span>调度记录</span>
      </div>
    </template>
  </detail-card>
</template>

<script>
import JobDetailCard from './components/DetailCard'
import JobLogCard from "./components/LogCard.vue";


export default {
  name: "JobDetail",
  components: {
    JobDetailCard, JobLogCard
  },
  data() {
    return {
      baseUrl: '',
      navIndex: 1,
    }
  },
  created() {
    console.log(this.$route)
  },
  methods: {
    handleNav(nav) {
      if (this.navIndex === nav) return
      this.navIndex = nav
      let h = 0
      switch (nav) {
        case 1:
          h = this.$refs.base.$el.offsetTop
          break
        case 2:
          h = this.$refs.log.$el.offsetTop
          break
        default:
          break
      }
      this.$refs.box.scroll(h)
    },
  },
}
</script>

<style scoped>

</style>
